<template>
  <div style="margin-top: 50px">
    <el-form
      ref="productAttrForm"
      :model="value"
      label-width="120px"
      inline
      style="width: 100%;"
    >
      <el-col :span="24">
        <el-form-item label="商品相冊：">
          <el-upload
            ref="my-upload"
            class="upload"
            :on-success="handleSuccess"
            :on-error="handleError"
            :headers="headers"
            :action="imagesUploadApi"
            :data="type"
            :on-remove="handleRemove"
            list-type="picture-card"
            :file-list="fileLists"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="规格参数：">
          <el-tabs v-model="activeHtmlName" type="card" style="width: 1000px">
            <el-tab-pane label="中文详情" name="detailCn">
              <tinymce v-model="value.detailMobileHtmlCn" :width="900" :height="300" />
            </el-tab-pane>
            <el-tab-pane label="英文详情" name="detailEn">
              <tinymce v-model="value.detailMobileHtmlEn" :width="900" :height="300" />
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
      </el-col>
      <el-col :span="24" :offset="10">
        <el-form-item style="text-align: center">
          <el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
          <el-button type="primary" size="medium" @click.native="handleFinishCommit">完成，提交商品</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'

export default {
  name: 'ProductAttrDetail',
  components: { Tinymce },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      type: { type: 0 },
      headers: {
        'Authorization': getToken()
      },
      // 编辑模式时是否初始化成功
      hasEditCreated: false,
      // 商品富文本详情激活类型
      activeHtmlName: 'detailCn'
    }
  },
  computed: {
    // 商品的编号
    productId() {
      return this.value.id
    },
    ...mapGetters(['imagesUploadApi', 'baseApi']),

    fileLists() {
      const fileLists = []
      if (this.isEdit) {
        this.value.albumPics.forEach(item => {
          fileLists.push({ url: this.baseApi + item, response: { data: { url: item }}})
        })
        return fileLists
      }
      return fileLists
    }
  },
  watch: {
    productId: function(newValue) {
      if (!this.isEdit) return
      if (this.hasEditCreated) return
      if (newValue === undefined || newValue == null || newValue === 0) return
    }
  },
  created() {
  },
  methods: {
    handlePrev() {
      this.$emit('prevStep')
    },
    handleFinishCommit() {
      this.$emit('finishCommit', this.isEdit)
    },
    handleExceed(files, fileList) {
      this.$message.warning('当前限制选择 1张图片，请重新选择')
    },
    handleSuccess(response, file, fileList) {
      this.value.albumPics = []
      if (response.code === 0) {
        fileList.forEach(item => {
          this.value.albumPics.push(item.response.data.url)
        })
      } else {
        this.$message.error('图片上传失败,请重新上传')
      }
    },
    handleError(res) {
      this.$message.error('图片上传失败,请重新上传')
    },
    clearFiles() {
      this.$refs['my-upload'].clearFiles()
      this.fileList = []
    },
    handleRemove(file, fileList) {
      function findImg(url) {
        return url === file.response.data.url
      }
      const idx = this.value.albumPics.findIndex(findImg)
      if (idx !== -1) {
        this.value.albumPics.splice(idx, 1)
      }
    }
  }
}
</script>

<style scoped>

</style>
